document.addEventListener('DOMContentLoaded', async () => {
    try {
        // 获取Markdown文件内容
        const response = await fetch('../CHROME_CAPABILITIES.md');
        const text = await response.text();

        // 配置marked选项
        marked.setOptions({
            highlight: function(code, lang) {
                if (Prism.languages[lang]) {
                    return Prism.highlight(code, Prism.languages[lang], lang);
                }
                return code;
            }
        });

        // 转换Markdown为HTML
        const content = marked.parse(text);

        // 插入到页面
        document.getElementById('content').innerHTML = content;

        // 添加样式到标题和代码块
        const contentDiv = document.getElementById('content');
        
        // 样式化标题
        contentDiv.querySelectorAll('h1').forEach(h1 => {
            h1.classList.add('text-3xl', 'font-bold', 'mb-6', 'mt-12', 'pb-2', 'border-b', 'border-gray-200');
        });
        
        contentDiv.querySelectorAll('h2').forEach(h2 => {
            h2.classList.add('text-2xl', 'font-semibold', 'mb-4', 'mt-8');
        });
        
        contentDiv.querySelectorAll('h3').forEach(h3 => {
            h3.classList.add('text-xl', 'font-semibold', 'mb-3', 'mt-6');
        });

        // 样式化段落和列表
        contentDiv.querySelectorAll('p').forEach(p => {
            p.classList.add('mb-4', 'text-gray-700', 'leading-relaxed');
        });

        contentDiv.querySelectorAll('ul').forEach(ul => {
            ul.classList.add('list-disc', 'ml-6', 'mb-4', 'text-gray-700');
        });

        contentDiv.querySelectorAll('ol').forEach(ol => {
            ol.classList.add('list-decimal', 'ml-6', 'mb-4', 'text-gray-700');
        });

        // 样式化代码块
        contentDiv.querySelectorAll('pre').forEach(pre => {
            pre.classList.add('mb-4', 'rounded-lg', 'bg-gray-800', 'p-4', 'overflow-x-auto');
        });

        contentDiv.querySelectorAll('code').forEach(code => {
            if (code.parentElement.tagName !== 'PRE') {
                code.classList.add('bg-gray-100', 'px-1', 'rounded');
            }
        });

        // 样式化链接
        contentDiv.querySelectorAll('a').forEach(a => {
            a.classList.add('text-blue-600', 'hover:text-blue-800', 'underline');
        });

    } catch (error) {
        console.error('Error loading markdown:', error);
        document.getElementById('content').innerHTML = '<p class="text-red-500">Error loading content. Please try again later.</p>';
    }
});
